<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>数据</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="renderer" content="webkit">
	<meta name="description" content="数据">
	<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
	
	<link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<!-- 底部加载js -->
	<script src="${pageContext.request.contextPath}/js/jquery-1.12.4.min.js"></script>
	<!-- 图表控件 -->
	<script src="${pageContext.request.contextPath}/js/echarts-all-3.js"></script>
	<script src="${pageContext.request.contextPath}/js/layer/layer.js"></script>
	<script src="${pageContext.request.contextPath}/js/page/common.js"></script>
	<%-- <script src="${pageContext.request.contextPath}/js/layer/layer.js"></script> --%>
	<script type="text/javascript">
	$(document).ready(function(){
		// 图表创建
		var myChart = echarts.init(document.getElementById('chartsDiv'));
	    myChart.setOption({
	        title: {
	            text: "${title}",
	            textStyle:{
	            	color:"#336699"
	            },
	            textAlign:"left"
	        },
	        tooltip: {
		        trigger: 'axis',
		        formatter:function(params){
		        	// console.log('-- tooltip formatter --')
		        	// console.log(params)
		        	return params[0].axisValue+'<br>${cnUnit}：'+params[0].value+'${enUnit}';
		        }
		    },
	        legend: {
	        	right:20,
	            data:['${deviceName}']
	        },
	        xAxis: {
	            
	            type: 'category',
	        	boundaryGap: false,
	        	data: ${xData}
	        },
	        yAxis: {
		        type: 'value',
		        min: ${ymin},
		        max: ${ymax},
		        axisLabel: {
		            formatter: function(value,index){
		            	// console.log(value)
		            	// console.log(index)
	            		return value+'${enUnit}';
		            }
		        }
		    },
	        series: [{
	            name: '${deviceName}',
	            type: 'line',
	            data: ${yData},
	            itemStyle:{
	            	normal:{
	            		color:'#2b6ba9'
	            	}
	            },
	            areaStyle: {normal: {}}
	        }]
	    });

	});
	</script>

  </head>
  
  <body style="background:#fff;">
		<div class="page-article1 data-article left" style="width:100%" name="pageArticle1" id="dataArticle">
			<div class="charts-box">
				<div class="charts-div" id="chartsDiv"></div>
			</div>
			<div class="block30"></div>
		</div>
		<div class="clear"></div>
  </body>
</html>
